<template>
  <div  class="cropper-content__wrap" title="图片剪裁" v-if="dialogVisible">

    <div class="cropper-content">

      <div class="header">
        <p>上传图片</p>
        <yun-icon name="close1" size="12px" color="#999" @click.native="dialogVisible=false"></yun-icon>
      </div>
      <div class="cropper" style="text-align:center">
        <vue-cropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="true"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="autoCrop"
          :fixed="option.fixed"
          :fixedNumber="[cropperW, cropperH]"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue"
          :fixedBox="option.fixedBox"
        ></vue-cropper>
      </div>
      <div slot="footer" class="footer">
        <div></div>
        <div>
          <p class="cancel" @click="dialogVisible=false">取 消</p>
          <p class="confirm" @click="submitPhoto" :loading="loading">确认</p>
        </div>

      </div>
    </div>

  </div>
</template>


<script>
  import config from '../../../../action/config';

  export default {
    name:'yun-cropper',
    data(){
      return{
        // 裁剪组件的基础配置option
        dialogVisible:false,
        loading:false,
        option: {
          img: '', // 裁剪图片的地址
          info: true, // 裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成图片的质量
          outputType: 'jpeg', // 裁剪生成图片的格式
          canScale: false, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          // autoCropWidth: 300, // 默认生成截图框宽度
          // autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: true, // 固定截图框大小 不允许改变
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [5, 5], // 截图框的宽高比例
          full: true, // 是否输出原图比例的截图
          canMoveBox: false, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: false, // 截图框是否被限制在图片里面
          infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        },

        img:          'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',

      }
    },
    props:{
      file:[Object ,Blob],
      cropperW:{
        type:Number,
        default: 1,
      },
      cropperH:{
        type:Number,
        default: 1,
      },
      autoCrop:{
        type:Boolean,
        default:true,
      },
      addImg:Function,
      type:Number
    },
    computed:{
    },

    watch:{
      file(prev,next){
        this.changeUpload(prev)
      }
    },



    methods:{
      changeUpload(e) {
        let file = e;
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isLt5M) {
          this.$message.error('上传文件大小不能超过 5MB!')
          return false
        }
        const reader = new FileReader();
        reader.onload = () => {
          this.option.img = reader.result;
        };
        reader.readAsDataURL(file);

        // 上传成功后将图片地址赋值给裁剪框显示图片
        this.$nextTick(() => {
          this.dialogVisible = true
        })
      },
      submitPhoto(){
        this.$refs.cropper.getCropData((e) => {
          this.loading = true;
          let bytes = window.atob(e.split(',')[1]);
          let array = [];
          for(let i = 0;i<bytes.length;i++){
            array.push(bytes.charCodeAt(i))
          }
          let blob = new Blob([new Uint8Array(array)],{type:'image/jpeg'});
          // let picFile = new File(blob)

          let a = new FormData();
          let type = this.type;
          //0-用户头像
          //1-博客封面
          // 2-项目封面
          // 3-动态封面
          // 4-博客内容图片
          // 5-项目内容图片
          // 6-问答内容图片
          // 7-cms 内容图片

          a.append('file',new File([blob],+new Date()+'y.png'));
          a.append('type',type);  //0是头像
          this.$axios.$post(config.api.post.Resource.file,a).then((res)=>{
            if(res.code === 0){
              this.$emit(config.event.listenCropperPic,res.data);
            }else{
              this.$message({
                message:res.msg,
                type:'warning'
              })
            }
            this.loading = false

            this.dialogVisible = false

          })


        })

      },
    },
  }
</script>


<style lang="scss">
  .cropper-content__wrap{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index: 8000;
    background-color: rgba(33,41,44,.4);
    @extend %flex-row-center;
    .cropper-content {
      background-color: #fff;
      border-radius:4*$length;
      padding:24*$length;
      box-sizing: border-box;
      width:800*$length;
      height:auto;
      .header{
        @extend %flex-row-spb;
        p{
          @include fontStyle(14,19,500,#333,left);
        }
      }
      .cropper {
        padding:20*$length 0;
        width: auto;
        height: 500px;
      }
      .footer{
        @extend %flex-row-spb;
        div{
          @extend %flex-row-spb;

          .confirm{
            width:100*$length;
            height:40*$length;
            @extend %cursorPointer;
            @extend %animate-transition;
            &:hover{
              filter: brightness(130%);
            }
            margin-left:20*$length;
            background-color: #00AAE6;
            border-radius: 4*$length;
            @include fontStyle(14,40,500,#fff,center);
          }

          .cancel{
            width:100*$length;
            height:40*$length;
            background-color: #00AAE6;
            border-radius: 4*$length;
            @extend %cursorPointer;
            @extend %animate-transition;
            &:hover{
              filter: brightness(130%);
            }
            @include fontStyle(14,40,500,#fff,center);
          }
        }
      }
    }
  }

</style>
